<template>
    <div id="app">
        <div class="content">
<!--            <div class="c-left">-->
<!--                <div v-for="(item, index) in departTree" @click="toggle(index)">-->
<!--                    <div class="list-tit">{{ item.belongName }}</div>-->
<!--                    <ul v-if="index == showIndex">-->
<!--                        <li class="movehover" style="cursor:pointer;" v-for="depart in item.departList" @click="showList(depart.id)">{{ depart.name }}</li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->
            <div class="c-right" style="width: 1160px;">
<!--                <div class="weizhi">-->
<!--                    您当前位置：首页 ｜ 访问排名详细信息-->
<!--                </div>-->
                <div>
                    <ul class="visit-tit" style="width: 1160px;">
                        <li class="visit-title">标题</li>
                        <li class="visit-time">发布时间</li>
                        <li class="visit-source">发布人</li>
                        <li class="visit-count">浏览次数</li>
                    </ul>
                    <ul class="visit-txt-box">
                        <li v-for="item in visitStatistics" :key="item.id" @click="toContent(item.id, item.type)">
                            <span class="visit visit-title">{{ item.title | ellipsis(32) }}</span>
                            <span class="visit visit-time">{{ moment(item.createTime).format('YYYY-MM-DD')}}</span>
                            <span class="visit visit-source">{{item.departName }}</span>
                            <span class="visit visit-count">{{ item.count }}</span>
                        </li>
                        <li style="text-align: center !important;display: block;margin-top: 20px"
                            v-if="visitStatistics.length <= 0">没有更多信息了</li>
                    </ul>
                </div>
                <page :pagesize="queryParams.pageSize" :page="queryParams.pageNum" :total="totalNum"
                      @func="pageChange"></page>
            </div>
        </div>
    </div>
</template>
<script>
import request from "@/utils/request";
import page from "@/components/page";
import moment from "moment";

export default {
    name: '',
    components: {
        page
    },
    filters: {
        ellipsis(value, num) {
            if (!value) return ''
            if (num == NaN || num == undefined) num = 32
            if (value.length > num) {
                return value.slice(0, num) + '...'
            }
            return value
        }
    },
    data() {
        return {
            departTree: [],
            visitStatistics: [],
            showIndex: 0,

            queryParams: {
                pageNum: 1,
                pageSize: 20
            },
            totalNum: 0
        }
    },
    created() {
        // this.getDepartTree()
        // this.getDepartStatistics(0)
        this.getDepartStatistics()
    },
    methods : {
        moment,
        pageChange(info) {
            this.queryParams.pageNum = info.page
            this.getDepartStatistics()
        },
        getDepartStatistics() {
            request({
                url: '/business/statisticsHotsList/',
                method: 'get',
                params: this.queryParams
            }).then((res) => {
                this.visitStatistics = res.data.rows
                this.totalNum = res.data.total
            })
        },
        // showList(departId) {
        //     this.getDepartStatistics(departId)
        // },
        // toggle(index) {
        //     this.showIndex = index
        // },
        // getDepartStatistics(departId) {
        //     request({
        //         url: '/business/departStatisticsVisit/' + departId,
        //         method: 'get'
        //     }).then((res) => {
        //         this.visitStatistics = res.data.data
        //     })
        // },
        // getDepartTree() {
        //     request({
        //         url: '/business/departWithBelong/',
        //         method: 'get'
        //     }).then((res) => {
        //         this.departTree = res.data.data
        //     })
        // },
        toContent(id, type) {
            if (type == 1) {
                this.$router.push({
                    path: '/content', query: {
                        contentId: id
                    }
                })
            } else if (type == 2) {
                this.$router.push({
                    path: '/pdf', query: {
                        contentId: id
                    }
                })
            } else if (type == 3) {
                this.$router.push({
                    path: '/video_content', query: {
                        contentId: id
                    }
                })
            }
        },
    }
}
</script>
<style scoped>
.c-left {
    width: 260px;
    display: inline-block;
    padding: 20px;
    text-align: center;
    float: left;
}

.list-tit {
    font-weight: bold;
    color: white;
    background-color: #f50000;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid white;
    cursor: pointer;
}

.c-left ul {
    border: 1px #CCCCCC solid;
}

.c-left ul li {
    line-height: 45px;
    border-bottom: 1px #CCCCCC dashed;
}

.c-left ul li:last-child {
    border: none;
}

.c-right {
    margin-left: 20px;
    width: 860px;
    float: left;
    margin-right: 20px;
}

.weizhi {
    padding-top: 20px;
    font-size: 14px;
    line-height: 38px;
    border-bottom: 1px #CCCCCC dashed;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.c-right ul {
    list-style: disc;
}

.c-right ul li {
    line-height: 45px;
}

.c-right ul li a {
    color: #333333;
}

.visit-tit{
    background-color: #f9f9f9;
    display: inline-table;
    text-align: center;
}
.visit-tit li{
    display: inline-block;
    line-height: 45px !important;
    margin-left: 0 !important;
    border-right: 1px #FFFFFF solid;
}
.visit-txt-box li{
    display: inline-flex;
}
.visit-title {
    width: 650px;
}
.visit-time {
    text-align: center;
    width: 170px;
}
.visit-source {
    text-align: center;
    width: 180px;
}
.visit-count {
    text-align: center;
    width: 150px;
}
</style>
